<template>
  <div class="homeRegister">
    <el-row :span="24" class="regist-head">
      <div>
        <!-- <p>重置密码</p> -->
        <!-- <p>欢迎来到甘乐源销售管理平台,请完善资料</p> -->
      </div>
    </el-row>
    <el-row :span="24" class="regist-main">
      <!-- <p class="invate">邀请人：张三</p> -->
      <el-form :rules="rules" :ref="formRefs" :model="user" class="login-form">
        <el-form-item prop="phone">
          <el-input placeholder="手机号码" type="number" v-model="user.phone"></el-input>
        </el-form-item>
       <el-form-item prop="veriCode">
          <el-input class="code-input" icon="menu" placeholder="验证码" v-model="user.veriCode"></el-input>
          <button class="codebtn fl" :class="codestatus?'grey':''" :disabled="codestatus"  @click.prevent="getData()">{{codeText}}</button>
        </el-form-item>
        <el-form-item prop="userID">
          <el-input placeholder="用户名" v-model="user.userID"></el-input>
        </el-form-item>
         <el-form-item>
           <el-button class="loginbtn" @click="reset()">重置密码</el-button>
           <p  class="tip">重置成功后的密码为123456，请前往个人中心进行密码修改</p>
         </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  beforeCreate () {
    this.formRefs = 'registForm'
  },
  data () {
    return {
      user: { // 用户注册信息
        phone: '',
        veriCode: '',
        userID: ''
      },
      verifyObj: { // 验证码信息
        phone: null
      },
      codeText: '获取验证码',
      codestatus: false,
      rules: {
        phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            {message: '', trigger: 'change'}
        ],
        veriCode: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            {message: '', trigger: 'change'}
        ],
        userID: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            {message: '', trigger: 'change'}
        ]
      },
      projectBaseUrl: 'http://218.104.153.143:8089'
    }
  },
  methods: {
    getData () { // 获取验证码
      if (this.user.phone === '') {
        this.$message({
          message: '请输入手机号码',
          type: 'error',
          duration: 1000,
          showClose: false
        })
        return false
      }
      let sed = 60
      let timer = setInterval(() => {
        if (sed > 1) {
          sed--
          this.codeText = sed + 's'
          this.codestatus = true
        } else {
          clearInterval(timer)
          this.codeText = '获取验证码'
          sed = 60
          this.codestatus = false
        }
      }, 1000)
      this.verifyObj.phone = this.user.phone
      this.$http.get(this.projectBaseUrl + '/numberone-auth/busiUser/getVeriCode.shtml', {
        params: this.verifyObj
      }, { // 头文件及JSON格式设定
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => { // 数据获取成功
        this.$message({
          message: '验证码获取成功',
          type: 'success',
          duration: 1000,
          showClose: false
        })
      }, (ne) => { // 数据获取失败
        this.$message({
          message: '验证码获取失败',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    },
    reset () { // 重置密码
      let that = this
      this.$refs[this.formRefs].validate((valid) => {
        if (valid) {
          that.$http.post(this.projectBaseUrl + '/numberone-auth/busiUser/resetPassword.shtml', that.user, { // 头文件及JSON格式设定
            headers: {},
            emulateJSON: true
          }).then((data) => {
            if (data.body.success === '操作成功') {
              that.$message({
                message: '重置密码成功',
                type: 'success',
                duration: 1000,
                showClose: false
              })
              that.$router.push('/login')
            } else {
              that.$message({
                message: data.body.error,
                type: 'error',
                duration: 1000,
                showClose: false
              })
            }
          }, (ne) => {
            that.$message({
              message: '网络错误',
              type: 'error',
              duration: 1000,
              showClose: false
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.homeRegister {
    font-size: 12px;
    .tip{
        color:#a1a1a1;
        margin-top: 10px;
    }
    .regist-head{
      color:#fff;
      div{
        height: 201px;
        background: url('../../assets/imgs/bg.png') center center no-repeat;
        background-size: cover;
        p{
          font-size: 14px;

        }
        p:first-of-type{
          font:700 16px/80px "微软雅黑";
          margin-bottom: 15px;
        }
      }
    }
    .regist-main{
      .el-form-item__error{
        left: 10%
      }

      margin-top: 10px;
      .invate{
        font-size: 14px;
        color:#0DB85C;
        line-height: 34px;
      }
      input{
        width: 90%;
        height: 44px;
        border-radius: 20px;
        text-indent: 34px;
      }
      .el-input__icon{
        right: 0;
        left: 23px;
        font-size: 17px;
      }
      .icon-code{
          font-size: 29px;
          color: #bfcbd9;
          position: absolute;
          top: 7px;
          left: 39px;
      }
      .icon-psword{
          font-size: 24px;
          color: #bfcbd9;
          position: absolute;
          top: 10px;
          left: 39px;
      }
      .codebtn{
        color:#fff;
        width: 25%;
        height: 44px;
        background-color: #499E41;
        border-radius: 0 20px 20px 0;
        margin-left: -20px;
        border: none;
      }
      .code-input{
        width: 75%;
        float: left;
        margin-left: 5px;
      }
      .code-input input{
        // width: 100%;
        border-radius: 20px 0 0 20px;
      }
      .loginbtn{
        width: 90%;
        height: 44px;
        background-color: #499E41;
        margin-top: 30px;
        border-radius: 20px;
        color:#fff;
        font-size: 16px;
      }
    }
    .grey{
        background-color:#ccc !important;
      }
}
</style>
